<template>
  <div>
    <el-card
      class="card"
      shadow="hover"
      style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
    >
      <template #header>
        <h2 class="title">查看检索记录</h2>
      </template>

      <a-list item-layout="horizontal" :data-source="backendData">
        <template #renderItem="{ item }" v-if="flag">
          <a-list-item>
            <a-list-item-meta>
              <template #title>
                <a href="">{{ item.username }}</a>
              </template>
              <template #avatar>
                <a-avatar src="https://joeschmoe.io/api/v1/random" />
              </template>
<!--              <template></template>-->
            </a-list-item-meta>
              <a-button type="primary" @click="onGetUserRecords(item.username)">查看检索记录</a-button>
          </a-list-item>
<!--          <a-list-item v-if="!flag">-->
<!--            <a-list-item-meta>-->
<!--              <template #title>-->
<!--                查询时间：{{ item.using_time }}-->
<!--              </template>-->
<!--              <template #description>-->
<!--                <ul>-->
<!--                  <li v-for="(seed, seedIndex) in item.seed_words" :key="seedIndex">-->
<!--                    <p>ID: {{ seed.id }}</p>-->
<!--                    <p>Name: {{ seed.name }}</p>  -->
<!--                  </li>-->
<!--                </ul>-->
<!--              </template>-->
<!--            </a-list-item-meta>-->
<!--          </a-list-item>-->
        </template>

        <el-table :data="backendData" class="mid" v-if="!flag">
          <el-table-column prop="query" label="详情" type="expand" width="100">
            <template #default="props">
              <el-card shadow="hover" class="list-container">
                <el-table :data="props.row.seed_words" width="100">
                  <el-table-column prop="id" label="ID"/>
                  <el-table-column prop="name" label="名称"/>
                </el-table>
              </el-card>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="用户名">
            <div>{{username}}</div>
          </el-table-column>
          <el-table-column prop="using_time" label="时间"/>
        </el-table>
        <a-button v-if="!flag" type="primary" @click="returnToUsers">返回</a-button>
      </a-list>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getUsersList } from '@/api/record';
import { getUserRecords } from '@/api/record';

const flag = ref(true);
const username = ref('');

interface DataItem {
  title: string;
}

const backendData = ref([]);

const returnToUsers = () => {
  flag.value = true;
  username.value = '';
  onGetUsersList();
}

const onGetUsersList = () => {
  getUsersList().then((res) => {
    backendData.value = res.data;
  });
};

const onGetUserRecords = (data) => {
  flag.value = false;
  username.value = data;
  getUserRecords(data).then((res) => {
    backendData.value = res.data;
  });
};

onMounted(() => {
  flag.value = true;
  onGetUsersList();
});
</script>


<style>
list-container{
  margin: 2% auto;
  width:70%;
}
</style>
